<script setup>
const categories = ref([]);
categories.value = ["电力", "新能源"];
const active = ref(0);
const changeTab = (activeIndex) => {
    // TODO考虑路由跳转，还是数据切换
    active.value = activeIndex;
};
</script>
<template>
    <div class="tabs-wrap">
        <!-- <div class="button" v-for="item in categories" @click="changeTab">
            {{ item }}
        </div> -->
        <button
            :class="['btn', active == idx ? 'active' : '']"
            type="button"
            v-for="(item, idx) in categories"
            @click="changeTab(idx)"
        >
            <strong>{{ item }}</strong>
        </button>
    </div>
</template>
<style scoped lang="scss">
.btn {
    cursor: pointer;
    margin-right: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 7px 30px;
    background: linear-gradient(
                270deg,
                #0072ff 0%,
                #00eaff 48.8525390625%,
                #01aaff 100%
            )
            0 0 no-repeat,
        linear-gradient(
                180deg,
                #0072ff 0%,
                #00eaff 48.8525390625%,
                #01aaff 100%
            )
            0 0 no-repeat,
        linear-gradient(
                270deg,
                #0072ff 0%,
                #00eaff 48.8525390625%,
                #01aaff 100%
            )
            100% 0 no-repeat,
        linear-gradient(
                180deg,
                #0072ff 0%,
                #00eaff 48.8525390625%,
                #01aaff 100%
            )
            100% 0 no-repeat,
        linear-gradient(
                270deg,
                #0072ff 0%,
                #00eaff 48.8525390625%,
                #01aaff 100%
            )
            0 100% no-repeat,
        linear-gradient(
                180deg,
                #0072ff 0%,
                #00eaff 48.8525390625%,
                #01aaff 100%
            )
            0 100% no-repeat,
        linear-gradient(
                270deg,
                #0072ff 0%,
                #00eaff 48.8525390625%,
                #01aaff 100%
            )
            100% 100% no-repeat,
        linear-gradient(
                270deg,
                #0072ff 0%,
                #00eaff 48.8525390625%,
                #01aaff 100%
            )
            100% 100% no-repeat;
    box-shadow: inset 0 0 12px 0 rgba(82, 255, 226, 0.23);
    background-size: 2px 8px, 8px 2px, 2px 8px, 8px 2px;
    color: #fff;
    border: 0;
    font-size: 20px;
}
.btn.active {
    background-color: #3b7d9a;
    transform: scale(1.1);
}

.tabs-wrap {
    position: absolute;
    width: calc(100vw - 900px);
    text-align: center;
    top: 120px;
    left: 700px;
    z-index: 99;
    display: flex;
    width: 100;
    align-items: center;
    // justify-content: center; // 注释后，按钮靠左
}
</style>
